<template>
  <div class="home-container">
    <el-row :gutter="20" class="main-content">
      <!-- 左侧用户信息卡片 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
        <el-card class="user-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="header-title">个人信息</span>
            </div>
          </template>
          <div v-if="userInfo" class="user-info">
            <div class="info-item">
              <el-icon><User /></el-icon>
              <span class="label">用户名：</span>
              <span class="value">{{ userInfo.username }}</span>
            </div>
            <div class="info-item">
              <el-icon><School /></el-icon>
              <span class="label">公司：</span>
              <span class="value">{{ userInfo.company }}</span>
            </div>
            <div class="info-item">
              <el-icon><User /></el-icon>
              <span class="label">联系人：</span>
              <span class="value">{{ userInfo.contactPerson }}</span>
            </div>
            <div class="info-item">
              <el-icon><Phone /></el-icon>
              <span class="label">联系电话：</span>
              <span class="value">{{ userInfo.contactPhone }}</span>
            </div>
          </div>
          <div v-else class="loading">
            <el-skeleton :rows="4" animated />
          </div>
        </el-card>

        <!-- 快捷操作卡片 -->
        <el-card class="quick-actions-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="header-title">快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button type="info" @click="viewSecureKeys" class="action-button" :loading="loadingKeys">
              <el-icon><Key /></el-icon>
              <span>查看密钥包</span>
            </el-button>
            <el-button type="primary" @click="initProtocol" class="action-button" :loading="loadingProtocol">
              <el-icon><Connection /></el-icon>
              <span>协议初始化</span>
            </el-button>
            <el-button type="success" @click="viewSessionIds" class="action-button" :loading="loadingSessions">
              <el-icon><List /></el-icon>
              <span>查看会话ID</span>
            </el-button>
            <el-button type="warning" @click="viewRules" class="action-button">
              <el-icon><Document /></el-icon>
              <span>查看规则</span>
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧内容区 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
        <!-- 好友列表卡片 -->
        <el-card class="friends-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="header-title">好友列表</span>
              <el-button type="primary" size="small" @click="fetchFriends" :loading="loading">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </template>
          <div v-if="friends.length > 0" class="friends-content">
            <div class="friends-list">
              <el-scrollbar height="calc(100vh - 500px)">
                <div v-for="friend in friends" :key="friend.userId" class="friend-item">
                  <div class="friend-info">
                    <el-avatar :size="40" class="friend-avatar">
                      {{ friend.username.charAt(0).toUpperCase() }}
                    </el-avatar>
                    <span class="friend-name">{{ friend.username }}</span>
                  </div>
                  <el-button type="primary" size="small" @click="startChat(friend)">
                    <el-icon><ChatDotRound /></el-icon>
                    发起会话
                  </el-button>
                </div>
              </el-scrollbar>
            </div>
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
          <div v-else-if="loading" class="loading">
            <el-skeleton :rows="3" animated />
          </div>
          <div v-else class="empty-friends">
            <el-empty description="暂无好友" />
          </div>
        </el-card>

        <!-- 待处理事项卡片 -->
        <el-card class="pending-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="header-title">待处理事项</span>
              <el-button type="primary" link @click="refreshPendingItems">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </template>
          <div v-if="pendingItems.length > 0" class="pending-list">
            <el-scrollbar height="200px">
              <div v-for="item in pendingItems" :key="item.id" class="pending-item">
                <div class="item-info">
                  <el-tag :type="item.type === 'chat' ? 'success' : 'warning'" size="small">
                    {{ item.type === 'chat' ? '聊天' : '文件' }}
                  </el-tag>
                  <span class="item-title">{{ item.sender }}</span>
                  <el-badge v-if="item.count > 1" :value="item.count" class="message-count" type="danger" />
                </div>
                <div class="item-meta">
                  <span class="item-message">{{ item.lastMessage }}</span>
                  <span class="item-time">{{ item.time }}</span>
                  <el-button type="primary" link @click="handlePendingItem(item)">
                    查看
                  </el-button>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div v-else class="empty-pending">
            <el-empty description="暂无待处理事项" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 密钥包对话框 -->
    <el-dialog
      v-model="showKeysDialog"
      title="密钥包信息"
      width="80%"
      :close-on-click-modal="false"
    >
      <div v-loading="loadingKeys">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="身份密钥">
            <div class="key-info">
              <p>ID: {{ secureKeys?.identityKey?.id }}</p>
              <p>公钥: {{ secureKeys?.identityKey?.publicKey }}</p>
              <p>时间戳: {{ new Date(Number(secureKeys?.identityKey?.timestamp)).toLocaleString() }}</p>
            </div>
          </el-descriptions-item>
          
          <el-descriptions-item label="签名预共享密钥">
            <div class="key-info">
              <p>ID: {{ secureKeys?.signedPreKey?.id }}</p>
              <p>公钥: {{ secureKeys?.signedPreKey?.publicKey }}</p>
              <p>签名: {{ secureKeys?.signedPreKey?.signature }}</p>
              <p>时间戳: {{ new Date(Number(secureKeys?.signedPreKey?.timestamp)).toLocaleString() }}</p>
            </div>
          </el-descriptions-item>
          
          <el-descriptions-item label="预共享密钥">
            <el-table :data="secureKeys?.preKeys || []" style="width: 100%">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="publicKey" label="公钥" show-overflow-tooltip />
              <el-table-column prop="salt" label="盐值" show-overflow-tooltip />
            </el-table>
          </el-descriptions-item>
          
          <el-descriptions-item label="其他信息">
            <div class="key-info">
              <p>一次性ID: {{ secureKeys?.oneTimeId }}</p>
              <p>本地ID: {{ secureKeys?.localId }}</p>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 会话ID对话框 -->
    <el-dialog
      v-model="showSessionsDialog"
      title="会话ID列表"
      width="60%"
    >
      <div v-loading="loadingSessions">
        <el-table :data="sessionList" style="width: 100%">
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="sessionId" label="会话ID" show-overflow-tooltip />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getUserInfo, getFriends } from '../api/user'
import { getSecureKeys } from '../api/secure'
import api from '../api/index'
import { List, Document } from '@element-plus/icons-vue'

const router = useRouter()
const userInfo = ref<any>(null)
const friends = ref<any[]>([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 待处理事项
const pendingItems = ref<any[]>([])

// 加载待处理事项
const loadPendingItems = () => {
  const items = JSON.parse(localStorage.getItem('pending_items') || '[]')
  console.log('加载待处理事项:', items)
  pendingItems.value = items
}

// 处理待处理事项
const handlePendingItem = (item: any) => {
  if (item.type === 'chat') {
    // 清除该用户的待处理消息
    const items = JSON.parse(localStorage.getItem('pending_items') || '[]')
    const updatedItems = items.filter((i: any) => i.senderId !== item.senderId)
    localStorage.setItem('pending_items', JSON.stringify(updatedItems))
    pendingItems.value = updatedItems

    // 存储当前聊天对象信息
    localStorage.setItem('currentChatFriendId', item.senderId)
    localStorage.setItem('currentChatFriendName', item.sender)
    
    // 跳转到聊天页面
    router.push('/chat')
  } else {
    router.push('/files')
  }
}

// 刷新待处理事项
const refreshPendingItems = () => {
  loadPendingItems()
  ElMessage.success('刷新成功')
}

// 密钥包对话框
const showKeysDialog = ref(false)
const secureKeys = ref<any>(null)
const loadingKeys = ref(false)

// 协议初始化
const loadingProtocol = ref(false)
const initProtocol = async () => {
  loadingProtocol.value = true
  try {
    const user_uuid = localStorage.getItem('user_uuid')
    if (!user_uuid) {
      throw new Error('用户未登录')
    }

    // 查看是否含有预密钥包
    interface HasPreKeyResponse {
      data: {
        hasPreKey: boolean;
        maxPreKeyId: number;
      }
    }

    interface PreKeyBundleResponse {
      data: {
        userId: string;
        localId: number;
        identityKey: {
          id: number;
          publicKey: string;
          cipher: string;
          salt: string;
        };
        signedPreKey: {
          id: number;
          publicKey: string;
          signature: string;
          cipher: string;
          salt: string;
        };
        preKey: {
          id: number;
          publicKey: string;
          cipher: string;
          salt: string;
        };
        preKeyId: number;
        signedPreKeyId: number;
        signature: string;
      }
    }

    interface CreateSessionResponse {
      data: {
        sessionId: string;
        partyId: string;
      }
    }

    interface CreateStickySessionResponse {
      data: {
        keyId: number;
        key: string;
      }
    }

    const checkPreKeysResponse = await api.post<HasPreKeyResponse>('/keys/hasPreKey', {
        userId : user_uuid
      })
    if (!checkPreKeysResponse.data.hasPreKey) {
      // 如果没有预密钥包，生成新的预密钥
      const maxPreKeyId = checkPreKeysResponse.data.maxPreKeyId || 0
      const generatePreKeysResponse = await api.post('/secure/generatePreKeys', {
        nextPreKeyId: maxPreKeyId + 1,
        count: 10
      })

      const requestPayload = {
        userId: user_uuid,  // 你已有的 userId
        preKeyReqs: generatePreKeysResponse // 原始返回的数据
      }
      
      // 存储生成的预密钥
      await api.post('/keys/storePreKeys', requestPayload)
    }

    // 获取密钥包信息
    const userId = localStorage.getItem('user_uuid')
    const response = await api.post<PreKeyBundleResponse>('/keys/fetchPreKeyBundle', {
      userId,
      isSession: true
    })

    if (!response) {
      throw new Error('获取密钥包失败')
    }

    const keys = response.data
    // 构建会话包
    const sessionBundle = {
      userId: keys.userId,
      localId: keys.localId,
      identityKey: keys.identityKey,
      signedPreKey: keys.signedPreKey,
      signedPreKeyId: keys.signedPreKeyId,
      preKeyId: keys.preKeyId,
      preKey: keys.preKey,
      signature: keys.signature
    }

    // 初始化会话
    const result = await api.post('/secure/initPairwiseSession', sessionBundle)
    if (result) {
      ElMessage.success('协议初始化成功')
    } else {
      throw new Error(result.data.message || '协议初始化失败')
    }
  } catch (error: any) {
    console.error('协议初始化失败:', error)
    ElMessage.error(error.message || '协议初始化失败')
  } finally {
    loadingProtocol.value = false
  }
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await getUserInfo()
    userInfo.value = response
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  }
}

// 获取好友列表
const fetchFriends = async () => {
  loading.value = true
  try {
    const response = await getFriends(currentPage.value, pageSize.value)
    friends.value = response.records
    total.value = response.total
  } catch (error) {
    ElMessage.error('获取好友列表失败')
  } finally {
    loading.value = false
  }
}

// 处理页码改变
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchFriends()
}

// 处理每页条数改变
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  fetchFriends()
}

// 发起会话
const startChat = async (friend: any) => {
  try {
    // 获取好友的userId
    const userIdResponse = await api.get(`/user/getUserId/${friend.username}`)
    if (!userIdResponse.data) {
      throw new Error('获取用户ID失败')
    }
    const toUserId = userIdResponse.data

    // 创建会话
    const fromUserId = localStorage.getItem('user_uuid')
    const createSessionResponse = await api.post<CreateSessionResponse>('/session/createSession', {
      type: 1,
      fromUserId,
      toUserIds: [toUserId]
    })

    if (!createSessionResponse.data) {
      throw new Error('创建会话失败')
    }

    const { sessionId, partyId } = createSessionResponse.data

    // 对双方进行协议初始化
    const initSession = async (userId: string) => {
      // 查看是否含有预密钥包
      const checkPreKeysResponse = await api.post<HasPreKeyResponse>('/keys/hasPreKey', {
        userId
      })
      if (!checkPreKeysResponse.data.hasPreKey) {
        // 如果没有预密钥包，生成新的预密钥
        const maxPreKeyId = checkPreKeysResponse.data.maxPreKeyId || 0
        const generatePreKeysResponse = await api.post('/secure/generatePreKeys', {
          nextPreKeyId: maxPreKeyId + 1,
          count: 10
        })

        const requestPayload = {
            userId: userId,  // 你已有的 userId
            preKeyReqs: generatePreKeysResponse // 原始返回的数据
        }
        
        // 存储生成的预密钥
        await api.post('/keys/storePreKeys', requestPayload)
      }

      // 获取密钥包信息
      const response = await api.post<PreKeyBundleResponse>('/keys/fetchPreKeyBundle', {
        userId,
        isSession: true
      })

      if (!response) {
        throw new Error('获取密钥包失败')
      }

      const keys = response.data
      // 构建会话包
      const sessionBundle = {
        userId: keys.userId,
        localId: keys.localId,
        identityKey: keys.identityKey,
        signedPreKey: keys.signedPreKey,
        signedPreKeyId: keys.signedPreKeyId,
        preKeyId: keys.preKeyId,
        preKey: keys.preKey,
        signature: keys.signature
      }

      // 初始化会话
      const result = await api.post('/secure/initPairwiseSession', sessionBundle)
      if (!result) {
        throw new Error('协议初始化失败')
      }

      return {
        preKeyId: keys.preKeyId,
        identityKeyId: keys.identityKey.id
      }
    }

    // 初始化双方的协议
    const [fromInitResult, toInitResult] = await Promise.all([
      initSession(fromUserId!),
      initSession(toUserId)
    ])

    // 创建粘性会话
    const [fromStickySession, toStickySession] = await Promise.all([
      api.post<CreateStickySessionResponse>('/secure/createStickySession', {
        userId: fromUserId,
        sessionId
      }),
      api.post<CreateStickySessionResponse>('/secure/createStickySession', {
        userId: toUserId,
        sessionId
      })
    ])

    // 获取双方的身份密钥ID
    interface IdentityKeyIdResponse {
      data: number
    }

    const [fromIdentityKeyId, toIdentityKeyId] = await Promise.all([
      api.post<IdentityKeyIdResponse>('/keys/getIdentityKeyIdByUserId', {
        userId: fromUserId
      }),
      api.post<IdentityKeyIdResponse>('/keys/getIdentityKeyIdByUserId', {
        userId: toUserId
      })
    ])

    // 构建发送密钥对象
    const fromSenderKey = {
      keyId: fromStickySession.id,
      preKeyId: fromInitResult.preKeyId,
      identityKeyId: fromIdentityKeyId.data,
      partyId,
      chainId: 0,
      step: 1,
      userId: fromUserId,
      senderKey: fromStickySession.key
    }

    const toSenderKey = {
      keyId: toStickySession.id,
      preKeyId: toInitResult.preKeyId,
      identityKeyId: toIdentityKeyId.data,
      partyId,
      chainId: 0,
      step: 1,
      userId: toUserId,
      senderKey: toStickySession.key
    }

    // 存储发送方密钥
    await Promise.all([
      api.post('/keys/storeEncryptionSenderKey', fromSenderKey),
      api.post('/keys/storeEncryptionSenderKey', toSenderKey)
    ])

    // 存储会话信息
    localStorage.setItem('currentChatFriendId', toUserId)
    localStorage.setItem('currentChatFriendName', friend.username)
    localStorage.setItem('currentSessionId', sessionId)
    localStorage.setItem('currentPartyId', partyId)
    localStorage.setItem('fromSenderKey', JSON.stringify(fromSenderKey))
    localStorage.setItem('toSenderKey', JSON.stringify(toSenderKey))

    // 跳转到聊天页面
    router.push('/chat')
  } catch (error: any) {
    console.error('发起会话失败:', error)
    ElMessage.error(error.message || '发起会话失败')
  }
}

// 查看密钥包
const viewSecureKeys = async () => {
  loadingKeys.value = true
  try {
    const response = await getSecureKeys()
    secureKeys.value = response
    showKeysDialog.value = true
  } catch (error) {
    ElMessage.error('获取密钥包失败')
  } finally {
    loadingKeys.value = false
  }
}

// 会话ID对话框
const showSessionsDialog = ref(false)
const sessionList = ref<Array<{username: string, sessionId: string}>>([])
const loadingSessions = ref(false)

// 查看会话ID
const viewSessionIds = async () => {
  loadingSessions.value = true
  try {
    const userId = localStorage.getItem('user_uuid')
    if (!userId) {
      throw new Error('用户未登录')
    }
    const response = await api.get(`/session/getAllSessions/${userId}`)
    sessionList.value = response.data
    showSessionsDialog.value = true
  } catch (error) {
    ElMessage.error('获取会话列表失败')
  } finally {
    loadingSessions.value = false
  }
}

// 查看规则
const viewRules = () => {
  router.push('/rules')
}

onMounted(() => {
  fetchUserInfo()
  fetchFriends()
  loadPendingItems()
})

// 添加定时刷新
setInterval(() => {
  loadPendingItems()
}, 5000) // 每5秒刷新一次
</script>

<style scoped lang="scss">
.home-container {
  padding: 24px;
  height: 100%;
  box-sizing: border-box;
  background-color: #f5f7fa;
  
  .main-content {
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }

  .user-card, .friends-card, .quick-actions-card, .pending-card {
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #ebeef5;
      
      .header-title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }
  }
  
  .user-info {
    padding: 20px;
    
    .info-item {
      display: flex;
      align-items: center;
      margin: 16px 0;
      
      .el-icon {
        margin-right: 12px;
        font-size: 20px;
        color: #409EFF;
      }
      
      .label {
        color: #606266;
        margin-right: 12px;
        min-width: 80px;
      }
      
      .value {
        color: #303133;
        font-weight: 500;
      }
    }
  }

  .quick-actions {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .action-button {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      width: 100%;
      font-size: 15px;
      border-radius: 6px;
      transition: all 0.3s ease;
      border: none;
      white-space: nowrap;
      padding: 0;
      margin: 0;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      &.el-button--info {
        background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
        &:hover {
          background: linear-gradient(135deg, #36a3f7 0%, #409EFF 100%);
        }
      }
      
      &.el-button--primary {
        background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
        &:hover {
          background: linear-gradient(135deg, #85ce61 0%, #67C23A 100%);
        }
      }
      
      &.el-button--success {
        background: linear-gradient(135deg, #E6A23C 0%, #f0b95b 100%);
        &:hover {
          background: linear-gradient(135deg, #f0b95b 0%, #E6A23C 100%);
        }
      }
      
      &.el-button--warning {
        background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
        &:hover {
          background: linear-gradient(135deg, #f78989 0%, #F56C6C 100%);
        }
      }
      
      .el-icon {
        margin-right: 8px;
        font-size: 18px;
        display: flex;
        align-items: center;
      }
      
      span {
        font-weight: 500;
        line-height: 1;
      }
    }
  }
  
  .friends-content {
    padding: 20px;
    
    .friends-list {
      .friend-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #EBEEF5;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: #f5f7fa;
          transform: translateX(4px);
        }
        
        &:last-child {
          border-bottom: none;
        }
        
        .friend-info {
          display: flex;
          align-items: center;
          
          .friend-avatar {
            background-color: #409EFF;
            color: #fff;
            margin-right: 16px;
            font-size: 16px;
          }
          
          .friend-name {
            font-size: 15px;
            color: #303133;
            font-weight: 500;
          }
        }

        .el-button {
          padding: 8px 16px;
        }
      }
    }
    
    .pagination-container {
      padding: 20px 0;
      display: flex;
      justify-content: center;
      background-color: #fff;
      border-top: 1px solid #EBEEF5;
    }
  }

  .pending-list {
    padding: 20px;
    
    .pending-item {
      display: flex;
      flex-direction: column;
      padding: 16px;
      border-bottom: 1px solid #EBEEF5;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #f5f7fa;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
        
        .item-title {
          color: #303133;
          font-size: 15px;
          font-weight: 500;
        }

        .message-count {
          margin-left: 8px;
        }
      }
      
      .item-meta {
        display: flex;
        align-items: center;
        gap: 20px;
        
        .item-message {
          color: #606266;
          font-size: 14px;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 300px;
        }
        
        .item-time {
          color: #909399;
          font-size: 13px;
          white-space: nowrap;
        }
      }
    }
  }
  
  .loading {
    padding: 40px 0;
    display: flex;
    justify-content: center;
  }
  
  .empty-friends, .empty-pending {
    padding: 60px 0;
    display: flex;
    justify-content: center;
  }
}

// 响应式布局调整
@media screen and (max-width: 1200px) {
  .home-container {
    padding: 16px;
    
    .main-content {
      .el-col {
        width: 100%;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .home-container {
    padding: 12px;
    
    .user-card, .friends-card, .quick-actions-card, .pending-card {
      margin-bottom: 16px;
      
      .card-header {
        padding: 12px 16px;
        
        .header-title {
          font-size: 16px;
        }
      }
    }
    
    .user-info, .quick-actions, .friends-content, .pending-list {
      padding: 16px;
    }
    
    .friends-content {
      .friends-list {
        .friend-item {
          padding: 12px;
          
          .friend-info {
            .friend-avatar {
              margin-right: 12px;
            }
          }
        }
      }
    }

    .pending-list {
      .pending-item {
        padding: 12px;
        
        .item-meta {
          gap: 12px;
        }
      }
    }
  }
}

.key-info {
  p {
    margin: 8px 0;
    word-break: break-all;
    line-height: 1.6;
  }
}

// 对话框样式优化
:deep(.el-dialog) {
  border-radius: 8px;
  
  .el-dialog__header {
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid #EBEEF5;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
}
</style> 